<template>
	<div ref="lineBox" style="width: 100%; height: 100%"></div>
</template>

<script setup>
	import * as echarts from "echarts";
	import {
		ref,
		onMounted,
		watch
	} from "vue";
	
	const lineBox = ref(null);
	const option = ref(null);
	let myChart = null;
	
	const myProps = defineProps({
		//月份数据
		monthdata: {
			type: Array,
			required: true,
		},
		//折线数据
		totaldata: {
			type: Array,
			required: true,
		},
	});
	
	//监听数据的变化
	watch(
		() => option.value,
		(newvalue, oldvalue) => {
			myChart.setOption(option.value);
		}, {
			deep: true,
		}
	);
	
	
	onMounted(() => {
		myChart = echarts.init(lineBox.value, 'dark', {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};

		option.value = {
			backgroundColor:"#001432",
			title: {
				text: "12个月内空气质量超标趋势",
				textStyle: {
					fontSize: "14px",
				},
				left: "center",
				top: "20px"
			},
			xAxis: {
				type: 'category',
				data: myProps.monthdata
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: myProps.totaldata,
				type: 'line',
				smooth: true
			}]
		};

		if (option.value && typeof option.value === 'object') {
			myChart.setOption(option.value);
		}

		window.addEventListener('resize', myChart.resize);
	});
</script>

<style>
</style>
